<template>
  <div class="container">
    <div class="cheader2">
      <van-icon
          @click="goBack"
          class="chl"
          name="arrow-left"
          color="#000"
          size="20"
      />
      <div class="chtitle">{{ $t('all.querentixian') }}</div>
      <div class="djbox"></div>
    </div>
    <div class="ibox1">
      <div class="il1">{{ $t('all.ninjiangshoudao') }}USDT</div>
      <div class="il2">
        {{ Number(submitForm.amount) - Number(submitForm.fee) }}
      </div>
    </div>
    <div class="xbox">
      <div class="xli">
        <div class="xli1">{{ $t('all.dizhi') }}</div>
        <div class="xli2">{{ submitForm.address }}</div>
      </div>
      <div class="xli">
        <div class="xli1">{{ $t('all.zhuanzhangwangluo') }}</div>
        <div class="xli2">{{ userInfos.envChain }}</div>
      </div>
      <div class="xli">
        <div class="xli1">{{ $t('all.zonge') }}</div>
        <div class="xli2">{{ submitForm.amount }} USDT</div>
      </div>
      <div class="xli">
        <div class="xli1">{{ $t('all.shouxufei') }}</div>
        <div class="xli2">{{ submitForm.fee }} USDT</div>
      </div>
    </div>
    <!-- <div class="ibox2">
      <div class="ili">
        <div class="ili-1">{{$t('all.yanzhengma')}}</div>
        <div class="ili-2">
          <van-field
            v-model="submitForm.verificationCode"
            :placeholder="$t('all.qingshuruyanzhengma')"
            :border="false"
          />
          <span class="fasong" @click="sendEmailCode">{{ emailText }}</span>
        </div>
      </div>
    </div> -->

    <div class="btn" @click="handleSubmit">{{ $t('all.tijiao') }}</div>
  </div>
</template>

<script setup lang='ts'>
import {getCurrentInstance, reactive, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {useStore} from "@/store";
import {Toast} from "vant";
import http from "@/utils/http";

const {appContext: {config: {globalProperties}}} = getCurrentInstance();

const store = useStore();
const route = useRoute();
const router = useRouter();
const emailText = ref<number | string>(globalProperties.$t('all.fasong'));
const userInfos = store.state.users.infos;
const submitForm = reactive({
  address: route.query.address,
  amount: route.query.amount,
  fee: route.query.fee,
  verificationCode: "",
});
const sendEmailCode = async () => {
  if (emailText.value === globalProperties.$t('all.fasong')) {
    emailText.value = 60;
    const timer = setInterval(() => {
      if (emailText.value <= 0) {
        emailText.value = globalProperties.$t('all.fasong');
        clearInterval(timer);
        return;
      }
      (emailText.value as number) -= 1;
    }, 1000);
    const ret: any = await http.post('email/send', {
      email: userInfos.email,
      type: 4,
      withdrawalEmail: {
        actualWithdrawalAmount:
            Number(submitForm.amount) - Number(submitForm.fee), //实际提现数量
        arrivalAddress: submitForm.address, //到账地址
      },
    })
    if (ret.code === 200) {
      Toast(ret.msg || ret.data);
    }
  }
};
const handleSubmit = () => {
  // if (!submitForm.verificationCode) {
  //   Toast(globalProperties.$t('all.qingshuruyanzhengma'));
  //   return;
  // }
  http
      .post("withdrawal/apply", {
        quantity: submitForm.amount,
        arrivalAddress: submitForm.address,
        chain: userInfos.envChain,
        // verificationCode: submitForm.verificationCode,
      })
      .then((res: any) => {
        if (res.code === 200) {
          Toast(globalProperties.$t('all.tixianshenqingchenggong'));
          setTimeout(() => {
            goBack();
          }, 1000);
        }
      });
};
const goBack = () => {
  router.go(-1);
};
</script>

<style lang="scss" scoped>
.cheader2 {
  z-index: 1001;
  width: 100%;
  height: 45px;
  background-color: #fff;
  font-size: 16px;
  color: #000;
  position: fixed;
  top: 0;
  left: 0;

  .chl {
    position: absolute;
    left: 16px;
    top: 50%;
    text-align: center;
    transform: translateY(-50%);
  }

  .chtitle {
    position: absolute;
    left: 50%;
    top: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
  }

  .djbox {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;

    img {
      width: 16px;
      margin-right: 4px;
    }

    div {
      font-size: 13px;
      color: #878b97;
    }
  }
}

.xbox {
  padding: 10px 20px;

  .xli {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;

    .xli1 {
      font-size: 13px;
      color: #878b97;
    }

    .xli2 {
      text-align: right;
      width: 190px;
      word-wrap: break-word;
      font-size: 13px;
      color: #000;
    }
  }
}

.ibox1 {
  margin-top: 45px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .il1 {
    margin: 30px 0 20px;
    font-size: 13px;
    color: #878b97;
  }

  .il2 {
    font-size: 24px;
    color: #000;
    margin-bottom: 30px;
  }
}

.ibox2 {
  margin: 20px 20px;

  .ili {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;

    .ili-1 {
      font-size: 12px;
      color: #000;
      margin-bottom: 10px;
    }

    .ili-2 {
      background-color: #2d2f3b;
      border-radius: 4px;
      height: 38px;
      position: relative;

      .fasong {
        font-size: 13px;
        color: #36b4ea;
        position: absolute;
        right: 16px;
        top: 50%;
        z-index: 1001;
        transform: translateY(-50%);
      }
    }
  }
}

.btn {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fff;
  background-image: linear-gradient(to bottom right, #36b4ea, #0996d3);
  border-radius: 3px;
  width: calc(100% - 40px);
  margin: 40px auto;
}
</style>
